
@radius: 8rpx;

.g-container{
  box-sizing: border-box;
  height: 100%;
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: relative;
}
.g-main{
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  .list-wrap{
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 26rpx;
    .li-wrap{
      border: 1rpx solid #bbbbbb;
      background: #ffffff;
      margin-bottom: 20rpx;
      border-radius: @radius;
      .li-top{
        position: relative;
        padding: 0 14rpx;
        &:before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 8rpx;
          height: 36rpx;
          background: #0251FF;
        }
        & > view{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 72rpx;
          font-weight: bold;
          border-bottom: 2rpx solid #BBBBBB;

        }
        .top-left{

        }
        .top-right{
          color: #0251FF;

        }
      }
      .li-mid{
        padding: 10rpx;
        .cel{
          padding: 12rpx;
          display: flex;
          font-size: 32rpx;
          .cel-key{
            color: #828282;
            //width: 138rpx;
            //flex-shrink: 0;
            padding-right: 10rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .cel-val{
            color: #000;
            flex: 1;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .img-wrap{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 96rpx;
              height: 100%;
              .img{
                width: 64rpx;
                height: 64rpx;
                margin: 0 14rpx;
              }
            }
          }
        }
      }
      .li-bot{
        display: flex;
        justify-content: flex-end;
        padding: 0 22rpx 20rpx;
        .m-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          width: 120rpx;
          height: 57rpx;
          background: #0251FF;
          border-radius: @radius;
          font-size: 25rpx;
          &+ .m-btn {
            margin-left: 10rpx;
          }
          &.m-btn1{
            background: #6F9EFF;
            &:active{
              background: #6888e2;
            }
          }
          &.m-btn2{
            background: #9A9A9A;
            &:active{
              background: #848484;
            }
          }
          &.m-btn3{
            &:active{
              background: #0248d5;
            }
          }
        }
      }
    }
  }
  .loading{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .empty{
    background: #ffffff;
    height: 100%;
  }
  .prompt-msg{
    text-align: center;
    color: #969799;
    font-size: 28rpx;
  }
}

.g-footer{
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding: 10rpx 20rpx 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  .num{
    color: #0251FF;
    margin-left: 8rpx;
  }
  &>view + view{
    margin-left: 16rpx;
  }
}

